<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script>
        $(function () {
            //获取攻略id
            var strategyId = getParams().strategyId;
            var user = JSON.parse(sessionStorage.getItem("user"));
            var comments;
            var currentPage = 1;
            var pages;
            var strategyCommentId;
            var goodId;
            var collectId;
            //只有攻略id存在时才发送请求
            if (strategyId) {
                //发送get请求查询当前游记是否存在访问信息中
                $.get("/strategyVisits/"+strategyId,function (sum) {
                    console.log(sum);
                    if (sum == null || sum == ""){
                        $.post("/strategyVisits/"+strategyId,{id:strategyId,num:1});
                        $(".read").renderValues(data.data);
                    }else {
                        $.ajax({
                            url:"/strategyVisits/"+strategyId,
                            data:{"id":strategyId,"num":sum.num+1},
                            type:"PUT",
                            success:function (data) {
                                $(".read").renderValues(data.data);
                            }

                        })
                    }
                });
            }


            // 发送请求获取当前的攻略信息
            $.get("/strategies/" + strategyId, function (data) {
                console.log(data);
                strategyCommentId = data.commentId;
                collectId = data.collectId;
                $("#title").html(data.title);

                // 获取点赞id
                console.log(data.goodId);
                goodId = data.goodId;

                // 检查用户是否点赞
                checkAddGood(user, goodId);

                // 渲染点赞数量
                getCount(goodId);

                // 检查用户是否收藏
                checkAddCollect(user, collectId);

                // 渲染收藏数量
                getCollectCount(collectId);

            });


            $("#likeBtn").click(function () {
                if (user) {
                    // 检查用户是否可以点赞
                    $.get("/users/" + user.id + "/addGoods/" + goodId, function (data) {
                        if (data.success) {
                            $.post("/addGoods/" + goodId, function (data) {
                                if (data.success) {
                                    $("#likeState").html("已点赞");
                                    // 渲染点赞数量
                                    getCount(goodId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addGoods/" + goodId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#likeState").html("点赞");
                                    // 渲染点赞数量
                                    getCount(goodId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        closeBtnShow: true,
                        content: "登录后才可以进行点赞",
                        buttons: [
                            {
                                name: "跳转到登陆界面",
                                callback: function () {
                                    location.href = "/login.html";
                                }
                            },
                            {
                                name: "取消",
                                callback: function () {
                                }
                            }
                        ]
                    });
                }
            });

            $("#collectBtn").click(function () {
                if (user) {
                    // 检查用户是否可以收藏
                    $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                        if (data.success) {
                            $.post("/addCollects/" + collectId, function (data) {
                                if (data.success) {
                                    $("#collectState").html("已收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addCollects/" + collectId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#collectState").html("收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type:"confirm",
                        style:"ros",
                        titleShow:false,
                        closeBtnShow: true,
                        content:"登录后才可以进行收藏",
                        buttons:[
                            {
                                name:"跳转到登陆界面",
                                callback:function () {
                                    location.href="/login.html";
                                }
                            },
                            {
                                name:"取消",
                                callback:function () {
                                }
                            }
                        ]
                    });
                }
            });


            // 发送ajax请求获取攻略分类
            $.get("/strategies/"+strategyId+"/catalogs",function (data) {
                var num = 1;
                $("#pills-catalog .catalogs").renderValues({list:data},{
                    showTitle:function (ele,value) {
                        var content = (num++)+"/"+value;
                        if(num<10){
                            content = 0 + content;
                        }
                        ele.innerHTML = content;
                    },
                    handle:function (ele,value) {
                        ele.href="/strategyDetails.html?id="+value;
                    },
                });
            });
            //发送请求获取游记信息
            $.get("/travels/travelVisit",function (data) {
                console.log(data);
                $(".hot").renderValues({list:data},{
                    highContent:function (ele, value) {
                        ele.href="/travelContent.html?id="+value;
                    }
                });
            });


            setTimeout(function () {
                // 显示回复内容
                $.get("/comments/" + strategyCommentId, function (data) {
                    pages = data.pages;
                    comments = data.list;
                    $("#comment").renderValues(data, {
                        handle: function (ele, value) {
                            // 个人信息页面
                            ele.href = "/userProfiles.html?id=" + value;
                        }
                    })
                });
            }, 100);


            // 翻页
            $(window).scroll(function () {
                if (isEnd()) {
                    // 判断是否有下一页
                    if (currentPage < pages) {
                        // currentPage +1 , 发送ajax请求获取下一页到游记
                        currentPage++;
                        $.get("/comments/" + strategyId, {"currentPage": currentPage}, function (data) {
                            // 返回的数据只有翻页后的数据，没有当前页的数据，直接渲染原来的数据就没有了
                            // 原来的数据+当前的数据
                            $.merge(comments, data.list);
                            $("#comment").renderValues({list: comments}, {
                                handle: function (ele, value) {
                                    // 个人信息页面
                                    ele.href = "/userProfiles.html?id=" + value;
                                }
                            })
                        },"json");
                    } else {
                        $(document).dialog({
                            type:"notice",
                            infoText:"已经到底部了",
                            autoClose:2500,
                            position:"bottom"
                        });
                    }

                }
            });


            // 弹出点评框
            $("#commentBtn").click(function () {
//                console.log(user.id);
                // 判断是否登录
                if (user) {
                    $("#content").val("");
                    var dis = $(".onComment").attr("style");
                    if (dis) {
                        $(".onComment").attr("style", "");
                    } else {
                        $(".onComment").attr("style", "display:none");
                    }
                    $("#content").focus();

                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        content: "登录后才可以进行评论",
                        buttons: [{
                            name: "跳转到登陆界面",
                            callback: function () {
                                location.href = "/login.html";
                            }
                        }]
                    });
                }
            });


            // 评论
            $(".commentSubmit").click(function () {
                console.log(strategyId);
                var content = $("#content").val();
                $.post("/comments/" + strategyCommentId, {"content": content}, function (data) {
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        content: "评论成功",
                        buttons: [{
                            name: "确定",
                            callback: function () {
                                window.location.reload();
                            }
                        }]
                    });

                });
            });

//            reloadComment(i);

        });

        // 检查用户是否点赞
        function checkAddGood(user, travelGoodId) {
            // 点赞: 判断当前用户是否登录, 登录可点赞, 没登录不可以
            if (user){
                // 检查用户是否已经点赞
                $.get("/users/" + user.id + "/addGoods/" + travelGoodId, function (data) {
                    if (data.success) {
                        $("#likeState").html("点赞");
                    } else {
                        $("#likeState").html("已点赞");
                    }
                });
            }
        }

        // 获取当前内容点赞数量
        function getCount(goodId) {
            $.get("/addGoods/" + goodId + "/counts", function (data) {
                // 显示点赞数量
                $("#likeCount").html(data);
            });
        }

        // 检查用户是否收藏
        function checkAddCollect(user, collectId) {
            // 点赞: 判断当前用户是否登录, 登录可收藏, 没登录不可以
            if (user){
                // 检查用户是否已经收藏
                $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                    if (data.success) {
                        $("#collectState").html("收藏");
                    } else {
                        $("#collectState").html("已收藏");
                    }
                });
            }
        }

        // 获取当前内容收藏数量
        function getCollectCount(collectId) {
            $.get("/addCollects/" + collectId + "/counts", function (data) {
                // 显示收藏数量
                $("#collectCount").html(data);
            });
        }


    </script>
    <style>
        .onComment{
            width: 100%;
            display: inline-table;
            /*position: fixed;*/
            bottom: 30px;
            max-width: 500px;
            z-index: 9;
        }
    </style>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-8">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-home fa-fw fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title" id="title"></h5>
    <small class="read">
        <span render-html="num"></span>人阅读过此攻略
    </small>
    <div class="focus">
        <i class="fa fa-heart" id="collectBtn"><span id="collectCount"></span> <span id="collectState">收藏</span></i>
        <i class="fa fa-thumbs-up" id="likeBtn"><span id="likeCount"> </span> <span id="likeState">点赞</span></i>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="container hot">
            <h6>大家都在看</h6>

            <div id="hot" render-loop="list">
                <a href="travelContent.html" render-key="list.id" render-fun="highContent">
                    <button class="btn" render-html="list.title"></button>
                </a>
            </div>
        </div>
        <div class="catalogs">
            <div render-loop="list">
                <div class="container detail">
                    <h6 render-key="list.name" render-fun="showTitle"></h6>
                    <div render-loop="list.details">
                        <a href="strategyDetails.html" render-key="list.details.id" render-fun="handle">
                            <button class="btn" render-html="list.details.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div>
                <span>价格便宜</span>
                <span>很热闹</span>
                <span>交通方便</span>
                <span>吃的很多</span>
                <span>风景优美</span>
                <span>美食很多</span>
                <span>很特别</span>
                <span>爱上这座城</span>
                <span>住宿方便</span>
                <span>刚刚</span>
            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a href="userProfiles.html" render-key="list.commentator.id" render-fun="handle">
                            <img class="rounded-circle"
                                 render-src="list.commentator.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.commentator.nickName"></span></p>
                        <span class="comment-star"><i
                                class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                                class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                        <span class="comment-date" render-html="list.time"></span>
                        <div class="comment-content" >
                            <a href="strategyComment.html">
                                <p render-html="list.content"></p>
                            </a>

                        </div>

                        <!--<ul class="comment-img">-->
                            <!--<li>-->
                                <!--<img src="/upload/953e8fed-c49d-454a-85d9-2ed9ecf6eb18.jpeg">-->
                            <!--</li>-->
                        <!--</ul>-->

                        <div class="d-flex icon">
                            <a href="strategyComment.html">
                                <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                                <i class="fa fa-thumbs-o-up"> <span>0</span> </i>
                            </a>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
</div>

        <!-- 点评框 -->
        <div class="container onComment" style="display: none">
            <div class="commentbox ">
                <textarea cols="40" rows="3" placeholder="来说几句吧......" id="content"></textarea>
                <button class="btn btn-info pull-right commentSubmit">发送</button>
            </div>
            <div class="comment-list">
            </div>
        </div>


<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>